<template>
  <div class="con">
    <div style="padding: 8px 12px; margin-top: -10px">
      <div class="out">
        <span class="in">全开</span>
        <el-switch v-model="allBool" />
      </div>
      <div class="out" v-for="(danggan, i) in dangganArr" :key="i">
        <span class="in">0{{ i + 1 }}</span>
        <el-switch v-model="openBoolArr[i]" @click="openClose(i, danggan)" />
      </div>
    </div>
  </div>
</template>

<script setup name="Control">
import * as THREE from "three";
import { onMounted, ref, watch } from "vue";
import { CreatePointsTag } from "./ThreeBase/pointsTag.js";
import { createGanTween } from "./createTween";
import { raychoose } from "./ThreeBase/raychoose.js";
import { camera, controls } from "./ThreeBase/camera.js";
import { renderer } from "./ThreeBase/renderer.js";

const props = defineProps({
  model: { type: Object, required: true },
});
const dangganArr = ref([]);
const openBoolArr = ref(Array(8).fill(false));

const spriteArr = []; //所有热点模型集合
for (let i = 0; i < 8; i++) {
  const gz = props.model.getObjectByName("GZ00" + (i + 1));
  createGanTween(gz);
  dangganArr.value.push(gz);
  openBoolArr.value.push(false);
}

// 给每个档杆添加一个模型热点
for (let i = 0; i < 8; i++) {
  const gz = props.model.getObjectByName("GZ00" + (i + 1));
  // console.log(gz);

  const sprite = CreatePointsTag(gz);

  // 计算档杆包围盒，通过包围盒计算出来档杆包围盒集中中心坐标
  const box3 = new THREE.Box3();
  box3.expandByObject(gz);
  const size = new THREE.Vector3();
  box3.getSize(size);
  sprite.position.x += size.x * 0.7; // 根据包围盒尺寸移动热点模型
  sprite.position.z += 0.5; //在档杆前方适当偏移，避免旋转的时候被挡杆遮挡部分：根据热点模型尺寸写
  gz.add(sprite);
  sprite.i = i; //给热点模型编序号
  spriteArr.push(sprite);
  gz.openBool = false; //自定义一个属性用来判断档杆的状态
}

// 全部档杆开关
const allBool = ref(false);
// 每个档杆按钮的开关状态

const openClose = (i, danggan) => {
  if (danggan.openBool) {
    danggan.close.start();
    danggan.openBool = false;
    openBoolArr.value[i] = false;
  } else {
    danggan.open.start();
    danggan.openBool = true;
    openBoolArr.value[i] = true;
  }
};

// 监听 allBool
watch(allBool, (val) => {
  for (let i = 0; i < 8; i++) {
    const gz = props.model.getObjectByName("GZ00" + (i + 1));

    if (!gz) continue;

    if (val) {
      gz.open.start();

      gz.openBool = true;
      openBoolArr.value[i] = true;
    } else {
      gz.close.start();
      gz.openBool = false;
      openBoolArr.value[i] = false;
    }
  }
});
onMounted(() => {
  renderer.domElement.addEventListener("click", (event) => {
    const chooseObj = raychoose(event, spriteArr, camera);

    if (chooseObj) {
      const gz = props.model.getObjectByName("GZ00" + (chooseObj.i + 1));
      if (openBoolArr.value[chooseObj.i]) {
        gz.close.start(); // 判断档杆打开状态，关闭档杆
        gz.close.onStart(function () {
          gz.openBool = false;
          openBoolArr.value[chooseObj.i] = false;
          // closeTween(gz);
        });
      } else {
        gz.open.start(); // 判断档杆关闭状态，打开档杆
        gz.open.onStart(function () {
          gz.openBool = true;
          openBoolArr.value[chooseObj.i] = true;
          // openTween(gz);
        });
      }
    }
  });
});
</script>
<style scoped>
.con {
  position: absolute;
  top: 250px;
  left: 20px;
}
.out {
  background: rgba(0, 0, 0, 0.4);
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  margin-top: 20px;
}
.in {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  line-height: 40px;
  color: #fff;
  text-align: center;
}
</style>
